<script setup lang="ts">
  import { receptionDesk } from '@/router';
  import { AppRouteModule as RouteTypes } from '@/router/types';

  interface AppRouteModule extends Partial<RouteTypes> {
    label?: string;
  }

  const props = defineProps({
    routerList: {
      type: Array as PropType<AppRouteModule[]>,
      default: () => [],
    },
    currentLabel: {
      type: String as PropType<string>,
      default: null,
    },
  });

  const routesTree = computed<AppRouteModule[]>(() => {
    if (props.routerList.length) {
      return props.routerList;
    }
    return [
      {
        path: '/dashboard',
        meta: {
          title: '首页',
        },
        children: receptionDesk,
      },
    ];
  });

  function getCheckedNodes(routes: AppRouteModule[], checkedPaths: string[]): AppRouteModule[] {
    const checkedNodes: AppRouteModule[] = [];

    function traverse(routes: AppRouteModule[], parentNodes: AppRouteModule[] = []) {
      for (const route of routes) {
        const currentPath: AppRouteModule[] = [...parentNodes, route];
        if (checkedPaths.includes(route.path as string)) {
          checkedNodes.push(...currentPath);
        }
        if (route.children) {
          traverse(route.children, currentPath);
        }
      }
    }

    traverse(routes);
    return checkedNodes;
  }

  const route = useRoute();
  const breadcrumbs = computed<AppRouteModule[]>(() => {
    console.log(route);
    // receptionDesk;
    const currentPath = route.path as string;
    const checkedNodes: AppRouteModule[] = getCheckedNodes(routesTree.value, [currentPath]).filter(
      (e) => e.meta?.title,
    );
    console.log(checkedNodes);
    return checkedNodes.map((route: AppRouteModule) => ({
      ...route,
      path: route.path,
      label: (route.meta?.title || route.name) as string,
    }));
  });
</script>

<template>
  <!-- 导航 -->
  <div class="navigation">
    <div class="navigation-box">
      <div>您所在的位置：</div>
      <div class="navigation-grid flex flex-content-center flex-items-center">
        <div class="navigation-grid__item" v-for="(breadcrumb, index) in breadcrumbs" :key="index">
          <router-link
            :to="breadcrumb.path as string"
            :class="$route.path !== breadcrumb.path ? 'back' : ''"
          >
            {{
              $route.path === breadcrumb.path
                ? currentLabel || breadcrumb.label
                : route.path !== '/summary/summary' && breadcrumb.label === '个人概览'
                  ? '个人中心'
                  : breadcrumb.label
            }}
          </router-link>
          <span v-if="index < breadcrumbs.length - 1" :key="index" class="arrow">></span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .navigation-box {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 28px 0;
    font-family: 'Alibaba PuHuiTi';
    font-size: 18px;
    font-weight: 500;
    line-height: 18px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

    .back {
      color: #165dff;
    }

    .arrow {
      margin: 0 8px;
    }
  }
</style>
